<template>  
    <div>
        <div class="diy-wrapper">
          <div class="main-img">
            <img class="t-shirt" :src="diyData.imgSrc" alt="" />
            <img class="icon" :src="iconImg" alt="">
          </div>
          <div class="option-img">
            <img v-for="(item, index) in iconList" :src="item" alt="" :key="index" @click="changeIcon(item)" />
            <el-button @click="addToCart(diyData)" class="button" type="primary" round>+购物车</el-button>
          </div>
          
        </div>
    </div>
</template>

<script>
import Service from '@/service/request'

export default {
    data() {
      return {
        diyData: {},
        routerPath: ['home', 'cart', 'order'],
        iconList: [
          require('@/assets/doge4.png'),
          require('@/assets/sun.png'),
          require('@/assets/logo.png')
        ],
        iconImg: require('@/assets/doge4.png')
      }
    },
    methods: {
      handleSelect(key) {
        console.log(key, this.routerPath[key])
      },
      changeIcon(icon) {
        this.iconImg = icon
      },
      addToCart(data) {
        this.$message.success('加入购物车成功！')
        Service.addToCart(data.id, this.$store.state.userId)
      }
    },
    created() {
      const index = this.$route.params.index
      if (Object.keys(this.$store.state.data).length) {
        this.diyData = this.$store.state.data[index]
      } else {
        const dataStr = localStorage.getItem('data') || '{}'
        const data = JSON.parse(dataStr)
        this.diyData = data[index]
      }
    }
}
</script>

<style>
.diy-wrapper {
  display: flex;
  justify-content: center;
  padding-top: 50px;
  position: relative;
}

.main-img {
  position: relative;
  width: 600px;
  height: auto;
  border: 1px solid black;
  padding: 50px;
}

.t-shirt {
  width: 100%;
  height: auto;
}

.option-img {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 300px;
  height: auto;
  padding-left: 50px;
}

.option-img img {
  width: 100%;
  height: auto;
  border: 1px solid black;
  margin-bottom: 50px;
}

.icon {
  position: absolute;
  width: 30%;
  height: auto;
  top: 20%;
  left: 35%;
}
</style>